<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="pri">赋角色</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 开启头部工具栏 -->
<script type="text/html" id="toolbarDemo">
    <div class="demoTable">
        <div class="layui-inline">
            <input class="layui-input" name="username" id="demoReload" placeholder="请输入用户名" autocomplete="off">
        </div>
        <button class="layui-btn" lay-event="reload">搜索</button>
        <button class="layui-btn" lay-event="add">添加</button>
    </div>
</script>

<div id="pridiv" style="display:none; margin:10px;" >
    <form class="layui-form" action="" lay-filter="priform" id="form1">
        <input type="hidden" name="uid" id="uid" required  lay-verify="required" autocomplete="off" class="layui-input">
        <div id="test7" class="demo-transfer"></div><br>

        <div class="layui-input-block">
            <button class="layui-btn" lay-demotransferactive="getData" lay-submit lay-filter="priform">立即提交</button>
        </div>

    </form>
</div>

<div id="updatediv" style="display:none; margin:30px;">
    <form class="layui-form" action="" lay-filter="formTest" id="form">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">品牌</label>
            <div class="layui-input-block">
                <select name="bid" id="pinpai" lay-filter="sel1">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<div id="adddiv" style="display:none; margin:10px;">
    <form class="layui-form" action="" lay-filter="formTest" id="form2">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="text" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    layui.use(['table','form','transfer','util'], function(){
        var table = layui.table;//layui中使用html的table
        var $ = layui.$;//layui中使用jQuery
        var form = layui.form;
        var transfer = layui.transfer;
        var util = layui.util;
        var usertab = table.render({//表格渲染
            elem: '#test'
            ,url:'/user/showAll'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,cols: [[//列  标题栏
                 {field:'zizeng', title: '序号', sort: true,templet:'#zizeng',width:90}
                ,{field:'username', title: '用户名'}
                ,{field:'password', title: '密码'}
                ,{field:'email', title: '邮箱'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
            ]]
            ,page:true
            //表格加载完成之后可以对表格进行二次操作，渲染完回调
            ,done: function(res, curr, count){
                $("#demoReload").val(res.username);
            }
        });
        //监听头部工具栏事件
        table.on('toolbar(test)', function(obj){
            if(obj.event === 'add'){
                //在添加之前清空form表单中的数据
                form.val("formTest",{
                     "username":""
                    ,"password":""
                    ,"email":""
                });
                var alayer = layer.open({
                    type: 1
                    ,anim: 2
                    ,content: $('#adddiv')
                });
                form.on('submit(formDemo)',function (data){
                    layer.close(alayer);
                    $.ajax({
                        url:"/user/add"
                        ,type:"post"
                        ,data:data.field
                        ,success:function(d){
                            if(d === 1){
                                layer.msg('添加成功',{
                                    icon:1,
                                    time:1000//不配置默认3秒
                                },function(){
                                    //更新表格
                                    usertab.reload({
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                        ,where: {
                                            uid:null
                                        }
                                    });
                                });
                            }
                        }
                    });
                    return false;//阻止表单跳转
                });
            }else if(obj.event === 'reload'){
                usertab.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        username:$('#demoReload').val()
                    }
                });
            }
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定要删除吗', function(){
                    $.ajax({
                        url:'/user/del/'+data.uid,
                        type:'delete',
                        success:function (d){
                            if(d === 1){
                                layer.msg('删除成功',{
                                    icon:1,
                                    time:1000//不配置默认3秒
                                },function(){
                                    //更新表格
                                    usertab.reload({
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                        ,where: {
                                            uid:null
                                        }
                                    });
                                });
                            }
                        }
                    });

                });
            }else if(obj.event === 'edit'){
                $.ajax({
                    url:"/user/showBrand"
                    ,type:"get"
                    ,async:true
                    ,success:function (data) {
                        $.each(data.data,function (i) {
                            var d = data.data[i];
                            $("#pinpai").append("<option value='"+d.bid+"' "+(data.bid === d.bid ? 'selected':'')+">"+d.bname+"</option>");
                        });
                        form.render('select');
                    }
                });
                $("#form").append("<input type=\"hidden\" name=\"uid\" required  lay-verify=\"required\" autocomplete=\"off\" class=\"layui-input\">");
                var uplayer = layer.open({
                    type: 1
                    ,anim: 3
                    ,content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
                //form自动赋值
                form.val("formTest",{
                    "uid":data.uid
                    ,'bid':data.bid
                    ,"username":data.username
                    ,"password":data.password
                    ,"email":data.email
                });

                //提交
                form.on('submit(formDemo)',function (data){
                    layer.close(uplayer);
                    $.ajax({
                        url:"/user/update"
                        ,type:"post"
                        ,data:data.field//所有数据字段
                        ,success:function(d){
                            if(d === 1){
                                layer.msg('修改成功',{
                                    icon:1,
                                    time:1000//不配置默认3秒
                                },function(){
                                    //更新表格
                                    usertab.reload({
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                        ,where: {
                                            uid:null
                                        }
                                    });
                                });
                            }
                        }
                    });
                    return false;//阻止表单跳转
                });
            }else if(obj.event === 'pri'){
                var uplayer = layer.open({
                    type: 1
                    ,anim: 3
                    ,area: ['500px', '370px']
                    ,content: $('#pridiv')
                });
                //form自动赋值
                form.val("priform",{
                    "uid":data.uid
                });
                var data1 = [];
                var data2=[];
                $.ajax({
                    url:'/user/showMyRole?uid='+document.getElementById("uid").value
                    ,type:'get'
                    ,dataType:'json'
                    ,success:function (data) {
                        $(data.data1).each(function (i,n) {
                            data1.push({"value":n.rid,"title":n.role_name});
                        });
                        $(data.data2).each(function (i,n) {
                            data2.push(n.rid);
                        });
                        var aa=transfer.render({
                            elem: '#test7'
                            ,data: data1
                            ,value:data2
                            ,height: 250
                            ,id:"key123"
                        });
                        transfer.reload('key123', {
                            title: ['未拥有的角色', '已拥有的角色']
                        })
                    }
                });
                var cc;
                util.event('lay-demoTransferActive', {
                    getData: function(othis){
                        var getData = transfer.getData('key123'); //获取右侧数据
                        cc=JSON.stringify(getData);
                    }
                });


                //提交
                form.on('submit(priform)',function (data){
                    layer.close(uplayer);
                    $.ajax({
                        url:"/user/updateRoles/"+document.getElementById("uid").value+"/"+cc
                        ,type:"get"
                        ,success:function(d){
                            if(d === 1){
                                layer.msg('授权成功',{
                                    icon:1,
                                    time:1000//不配置默认3秒
                                });

                            }
                        }
                    });
                    return false;//阻止表单跳转
                });
            }
        });
    });
</script>
<script type="text/html" id="zizeng">
    {{d.LAY_TABLE_INDEX+1}}
</script>
</body>
</html>